<template>
	<view class="content">
		<view class="index-goods">
			<swiper class="carousel" circular :autoplay="true" :interval="4000" @change="swiperChange">
				<swiper-item v-for="(item, index) in goodsinfo.picture" :key="index" class="carousel-item">
					<image :src="item.toppic" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
		
		<!-- 活动倒计时及活动价格、有活动时隐藏价格及市场价格 -->
		<view class="activity_warp">
			<em>限时抢购</em>
			<text class="price">¥{{goodsinfo.price}}</text>
			<uni-countdown 
				color="#8c0027" 
				background-color="#ffffff" 
				border-color="#ffffff"
				splitorColor="#ffffff"
				:day="1" 
				:hour="1" 
				:minute="12" 
				:second="40">
			</uni-countdown>
		</view>
		<view class="goods_name_info">
			<text class="price"><b>¥{{goodsinfo.price}}</b></text>
			<text class="price_market"><span>¥{{goodsinfo.market}}</span></text>
			<text class="name">{{goodsinfo.name}}</text>
			<text class="title">{{goodsinfo.title}}</text>
			<view class="sales-share">
				<view class="freight"><i class="coolc icon-shouhou"></i><span>快递:{{goodsinfo.freight}}元</span></view>
				<view class="share"><i class="coolc icon-fenxiang1"></i><span>共{{goodsinfo.share}}次分享</span></view>
				<view class="sales"><i class="coolc icon-faxian"></i><span>销量{{goodsinfo.sale}}</span></view>
			</view>
		</view>
		<view class="slogan_box">
			<text class="col-4"><i class="coolc icon-zhengpin"></i><span>正品保障</span></text>
			<text class="col-4"><i class="coolc icon-zhubao"></i><span>品质溯源</span></text>
			<text class="col-4"><i class="coolc icon-shandian"></i><span>极速发货</span></text>
			<text class="col-4"><i class="coolc icon-quanwei"></i><span>售后无忧</span></text>
		</view>
		
		<view class="discount_box">
			<view class="discount_2"><text>该产品全国包邮</text></view>
			<view class="discount_1"><text>10.00元店铺优惠券，满100.00元可用</text><em>领取</em></view>
		</view>
		
		<view class="goods_shop">
			<navigator class="info" url="/pages/seller/index">
				<image src="/static/baner_logo_2.jpg" mode="widthFix" class="seller_logo"></image>
				<view class="shop_text">
					<view class="shop-title">劳力士官方旗舰店</view>
					<view class="region">所在地区：广东省 深圳市</view>
					<view class="shop-enter">进入店铺</view>
					<view class="goods-tab">综合评分:4.8</view>
				</view>
			</navigator>
		</view>
		
		<view class="tab-bar">
			<view id="tab-bar" class="swiper-tab">
				<view @click="tapTab(0)" :class="['swiper-tab-list',tabIndex == 0 ? 'active' : '']">产品详情</view>
				<view @click="tapTab(1)" :class="['swiper-tab-list',tabIndex == 1 ? 'active' : '']">推荐产品</view>
				<view @click="tapTab(2)" :class="['swiper-tab-list',tabIndex == 2 ? 'active' : '']">产品评价（56）</view>
			</view>
			<view :class="['infolist',tabIndex == 0 ? 'block' : '']">
				<img src="http://www.hiwiyi.com/newimage/productimage/pp/touwei/001.jpg">
				<img src="http://www.hiwiyi.com/newimage/productimage/pp/touwei/002.jpg">
				<img src="http://www.hiwiyi.com/newimage/productimage/pp/touwei/003.jpg">
				<img src="http://www.hiwiyi.com/newimage/productimage/pp/touwei/004.jpg">
			</view>
			<view :class="['infogoods',tabIndex == 1 ? 'block' : '']">
				<goods-Case v-for="(item, index) in goodsList[0].list" :key="index" v-bind:item="item"></goods-Case>
			</view>
			<view :class="['infocomment',tabIndex == 2 ? 'block' : '']">
				<view class="comment">
					<comments v-for="(item, index) in commentList[0].list" :key="index" v-bind:item="item"></comments>
				</view>
			</view>
		</view>
		
		<!-- 返回顶部 -->
		<view :class="['gotop',scrollTop > 500 ? 'gotops' : '']" @click="onGotoTop"><img src="~@/static/img/icon/gotop.png"></view>
		
		<view class="bottom_warp_box">
			<view class="gohome" navTo="/pages/home/home"><i class="coolc icon-zhuye"></i><span>首页</span></view>
			<view class="kefu"><i class="coolc icon-tiexinshouhou"></i><span>客服</span></view>
			<view class="shoucang"><i class="coolc icon-shoucang"></i><span>收藏</span></view>
			<view class="buyBtn" @click="popupOpen()">立即购买</view>
			<view class="cartAdd" @click="popupOpen()">加入购物车</view>
		</view>
		<popup-layer ref="popup">
			<view class="goodsinfo_mask">
				<image src="https://gd1.alicdn.com/imgextra/i4/502783/TB2aaEhmDnI8KJjSszbXXb4KFXa_!!502783.jpg" mode="widthFix" class="goods_images"></image>
				<view class="info">
					<b>¥710000</b>
					<span>库存：1999件</span>
					<span>已选择：<i>万年历系列</i></span>
				</view>
				<i class="coolc icon-cuohao" @click="popupClose()"></i>
			</view>
			<view class="spec_box">
				<view class="spec_title">规格一</view>
				<view class="spec">
					<text class="active">万年历系列</text>
					<text>水鬼绿系列</text>
					<text>森林公主系列</text>
					<text>行星星空系列</text>
				</view>
			</view>
			<view class="number_box">
				<span>购买数量</span>
				<uni-number-box 
					class="step"
					:min="1" 
					:max="100"
					:value="1"
				></uni-number-box>
			</view>
			<view class="cons_box">确定</view>
		</popup-layer>
		
		<!-- 顶部右侧菜单 -->
		<view v-bind:class="['navBarButtonBox',navBarButton ? '' : 'vb','']">
			<view class="h_newlit" v-bind:class="[navBarButton ? 'active' : '','']">
				<view class="em">
					<view class="livs">
						<i class="coolc icon-zhuye"></i> <span>首页</span>
					</view>
					<view class="livs">
						<i class="coolc icon-shangjialiebiaoicon"></i> <span>品牌列表</span>
					</view>
					<view class="livs">
						<i class="coolc icon-fenlei"></i> <span>商品分类</span>
					</view>
					<view class="livs">
						<i class="coolc icon-shipin"></i> <span>视频导购</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部右侧菜单 -->
		
	</view>
</template>

<style lang="scss">
page { padding-bottom:100upx !important; }
.gotop { bottom:100upx !important; }
.infolist,.infogoods,.infocomment { display:none; }
.block { display:block; }
.infogoods { width:100%; height:auto; background:$bgcolor_white; text-align:left; }

/* 活动倒计时、及活动价格 */
.activity_warp {
	width:100%; height:auto; display:table; background:url(~@/static/img/bg/activity_bg.jpg) no-repeat; background-size:100% auto; padding:26upx; position:relative;
	em { background:$bgcolor_white; font-size:$font-sm; color:#d13c63; font-style:normal; padding:1px 4px; border-radius:4px; clear:both; }
	.price { width:100%; height:auto; display:table; line-height:30upx; font-size:40upx; color:$bgcolor_white; font-weight:bold; margin-top:12upx; }
	.uni-countdown {
		position:absolute; top:26upx; right:26upx;
		
	}
}

/* 活动优惠券 */
.discount_box { 
	width:100%; height:auto; display:table; background:#ffffff; margin:16upx 0; padding:26upx 26upx 10upx 26upx;
	.discount_1 { 
		width:100%; height:16px; line-height:16px; margin-bottom:18upx; font-size:$font-sm; color:$font-color-999; position:relative; padding-left:58px; background:url(~@/static/img/bg/activities.png) no-repeat left;
		
		em { width:80upx; height:34upx; line-height:34upx; font-style:normal; border-radius:6upx; font-size:$font-sm; text-align:center; background:#cc0000; color:#ffffff; position:absolute; right:0px; top:0px; }
	}
	.discount_2 { width:100%; height:16px; line-height:16px; margin-bottom:18upx; font-size:$font-sm; color:$font-color-999; padding-left:44px; background:url(~@/static/img/bg/free.png) no-repeat left; }
}

/* 立即购买、加入购物车弹层内容 */
.popup-content { 
	padding:26upx; height:auto;
	.goodsinfo_mask { 
		width:100%; height:186upx; position:relative; padding-bottom:26upx;
		.goods_images { width:200upx; height:200upx; border:1px solid #eeeeee; border-radius:10upx; padding:5px; background:$bgcolor_white; position:absolute; left:26upx; top:-40upx; }
		.info { 
			position:absolute; width:100%; left:260upx; top:26upx;
			b { width:100%; height:46upx; color:#d2003b; display:block; clear:both; font-size:$font-base; }
			span { 
				width:100%; height:40upx; color:#999999; font-size:$font-sm; display:block; clear:both; 
				i { color:#000000; font-style:normal; }
			}
		}
		.coolc { width:40upx; height:40upx; line-height:40upx; font-size:24upx; text-align:center; border:1px solid #ccc; color:#ccc; border-radius:40upx; display:block; position:absolute; right:22upx; top:22upx; }
	}
	.number_box { 
		width:100%; height:122upx; clear:both; padding:26upx; position:relative; border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee;
		span { height:70upx; line-height:70upx; display:block; }
		.uni-numbox { left:520upx; bottom:26upx; }
	}
	.spec_box { 
		width:100%; height:auto; padding:26upx; border-top:1px solid #eeeeee;
		.spec_title { width:100%; height:60upx; line-height:40upx; font-size:$font-base; color:$font-color-999; }
		.spec { 
			width:100%; height:auto; display:table; margin-bottom:3upx;
			text { background:$all_bgcolor; display:block; float:left; border:1px solid $all_bgcolor; font-size:$font-base; margin:0 15upx 15upx 0; padding:5upx 20upx; border-radius:40upx; }
			text.active { border:1px solid #d2003b; background:$bgcolor_white; color:#d2003b; }
		}
	}
	.cons_box { width:100%; height:96upx; line-height:96upx; text-align:center; background:#d2003b; color:#ffffff; font-size:$font-lg; }
 }

/* 底部浮动按钮 */
.bottom_warp_box { 
	width:100%; height:96upx; background:$bgcolor_white; position:fixed; left:0px; right:0px; bottom:0px; text-align:center; box-shadow:0px -1px 5px #dedede;
	.gohome,.kefu,.shoucang { width:15%; display:block; float:left; }
	.gohome i,.kefu i,.shoucang i { width:100%; height:60upx; line-height:66upx; overflow:hidden; display:block; font-size:36upx; }
	.gohome span,.kefu span,.shoucang span { width:100%; height:36upx; line-height:20upx; font-size:$font-sm; display:block; }
	.gohome,.kefu { border-right:1px solid #eeeeee; }
	.buyBtn,.cartAdd { width:27.5%; display:block; float:left; line-height:96upx; font-size:$font-base; background:#8c0027; color:$bgcolor_white; }
	.cartAdd { background:#d2003b; }
}

/* 产品幻灯片 */
.carousel {
	width: 100%; height:750upx;
	.carousel-item { 
		width:100%; height:100%; overflow:hidden; 
		image { width:100%; height:100%; }
	}
}
.swiper-dots {
	display:flex; position:absolute; right:30upx; top:690upx; z-index:99; width:72upx; height:36upx;
	background-image: url();
	background-size: 100% 100%;
	.num { width:36upx; height:36upx; border-radius:50px; font-size:24upx; color:#fff; text-align:center; line-height:36upx; }
	.sign { position:absolute; top:0; left:50%; line-height:36upx; font-size:12upx; color:#fff; transform:translateX(-50%); }
}

.goods_name_info { 
	width:100%; background:#ffffff; padding:26upx;
	.name { width:100%; height:auto; display:table; line-height:40upx; font-size:$font-lg; }
	.title { width:100%; height:auto; display:table; padding:5upx 0; line-height:40upx; font-size:$font-base; color:#ff0000; }
	.price { width:100%; height:auto; display:table; line-height:30upx; }
	.price b { font-size:40upx; color:#d90000; padding-right:15upx; }
	.price span { font-size:26upx; color:$font-color-ccc; text-decoration:line-through; }
	.price_market { width:100%; height:40upx; line-height:30upx; }
	.price_market b { font-size:40upx; color:#d90000; padding-right:15upx; }
	.price_market span { font-size:26upx; color:$font-color-ccc; text-decoration:line-through; }
	
	.sales-share { 
		width:100%; height:46upx; clear:both; margin-top:15upx;
		.coolc { margin-right:12upx; font-size:$font-lg; }
		.freight { float:left; color:$font-color-ccc; font-size:$font-base;}
		.sales { float:right; padding-right:30upx; color:$font-color-ccc; font-size:$font-base; }
		.share { float:right; color:$font-color-ccc; font-size:$font-base; }
	}
}
.slogan_box { 
	width:100%; background:#ffffff; height:80upx; padding:0 25upx; clear:both; border-top:1px solid #eeeeee;
	.col-4 { width:175upx; height:80upx; line-height:80upx; display:block; float:left; }
	.col-4 .coolc { width:40upx; height:80upx; line-height:82upx; display:block; float:left; font-size:$font-lg; color:$font-color-999; }
	.col-4 span { width:135upx; height:80upx; display:block; float:left; font-size:$font-sm; color:$font-color-999; }
}
.col-4:nth-child(4) .coolc { width:50upx; }
.col-4:nth-child(4) span { width:125upx; }

.goods_shop { 
	width:100%; height:230upx; margin:16upx 0; background:#ffffff; padding:26upx;
	
	.info { 
		width:698upx; height:177upx; position:relative;
		.seller_logo { width:260upx; border:1px solid #eeeeee; float:left; }
		.shop_text { 
			width:418upx; height:177upx; float:right;
			
			.shop-title { width:100%; height:50upx; line-height:40upx; font-size:34upx; color:$font-color-333; }
			.region { width:100%; height:40upx; line-height:40upx; font-size:26upx; color:$font-color-999; }
			.shop-enter { width:140upx; height:50upx; line-height:50upx; text-align:center; background:#cc0000; color:#ffffff; position:absolute; left:282upx; bottom:0px; }
			.goods-tab { position:absolute; right:0px; bottom:0px; }
		}
	}
}
.infolist img { width:100%; }
</style>

<script>
import goodsCase from '@/components/goods-case'; //推荐产品组件
import comments from '@/components/comments'; //评论组件
import popupLayer from '@/components/popup-layer/popup-layer'; //弹层组件
import uniNumberBox from '@/components/uni-number-box'; //数量加减框组件
import uniCountdown from "@/components/uni-countdown/uni-countdown"; //倒计时组件
export default {
	components: {
		goodsCase,
		comments,
		popupLayer,
		uniNumberBox,
		uniCountdown
	},
	data() {
		return {
			swiperCurrent: 0,
			swiperLength: 0,
			scrollLeft: 0,
			isClickChange: false,
			scrollTop:0,
			tabIndex: 0,
			navBarButton:false,
			
			goodsList: [{}, {}],
			commentList:[{},{}],
			goodsinfo: {
				name : "百达翡丽AQUANAUT系列玫瑰金镶钻自动机械女表 5072R-001",
				title : "全球联保卡 专柜原装 官方直采假一赔十",
				price : "710000",
				market : "890000",
				freight : "15",
				stock : "99",
				sale : "195",
				share : "1900",
				picture : [{
					toppic :"https://gd1.alicdn.com/imgextra/i4/502783/TB2aaEhmDnI8KJjSszbXXb4KFXa_!!502783.jpg"
				},
				{
					toppic :"https://gd4.alicdn.com/imgextra/i4/502783/TB22jQvepHM8KJjSZFwXXcibXXa_!!502783.jpg"
				},
				{
					toppic :"https://gd1.alicdn.com/imgextra/i1/502783/TB2JbZYmBDH8KJjy1zeXXXjepXa_!!502783.jpg"
				}]
			}
		};
	},
	onPageScroll(res){
		this.scrollTop = res.scrollTop;
	},
    onLoad() {
        this.loadData();
        setTimeout(()=> {
            this.renderImage = true;
        },300);
		
		uni.setNavigationBarTitle({
			title: this.goodsinfo.name
		});
    },
	// #ifndef MP
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			this.navBarButton = !this.navBarButton; 
		}
		if (index === 1) {
			//分享
		}
	},
	// #endif
	methods:{
		async tapTab(index) {
			this.tabIndex = index;
		},
		onGotoTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		//弹层显示隐藏
		popupOpen(){
			this.$refs.popup.show()
		},
		popupClose(){
			this.$refs.popup.close()
		},
		//链接跳转
		navTo(url){
			uni.reLaunch({  
				url
			})  
		}, 
		async loadData() {
			this.swiperLength = this.goodsinfo.picture.length;
			this.goodsinfo = this.goodsinfo;
			
			//推荐产品
			let goodsList = await this.$api.json('goodsList');
			this.goodsList = goodsList;
			
			//评论数据
			let commentList = await this.$api.json('commentList');
			this.commentList = commentList;
		},
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
		}
	}
};
</script>